<template>
  <AppHeader :title="title" :banAnimate="true">
    <template #left>
      <img
        @click="onClickLeft"
        src="@/assets/images/icon-back-black.png"
        width="9"
        height="18"
      />
    </template>
  </AppHeader>
  <div class="book-details">
    <div class="content">

      <van-cell  @click="cellClick(i)" is-link v-for="i in  state.dataForm.sr" :key="i.id" class="cell-list">
        <template #title>
         <span class="ellipsis-multiline2 custom-title">
          {{i.resourceName}}
         </span>
        </template>
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #icon>
          <img class="img"
          src="@/assets/images/unit-icon.png"
          width="20"
          height="20"
        />
        </template>
        <template #label>
          <div class="tag-blue">{{i.moduleName}}</div>
          <!-- <div class="tag-yellow" v-else>重点词组归纳</div> -->
        </template>
      </van-cell>
    </div>

  </div>
  <div class="tk-select" v-show="isshowTk" @click="hiddenTk">
    <div class="select-box">
      <div class="select-option circle-yellow" @click="clickArticle(1)">跟读</div>
      <div class="select-option circle-green" @click="clickArticle(2)">朗读</div>
      <!-- <div class="select-option circle-blue" @click="clickArticle(3)">背诵</div> -->
    </div>
  </div>
  <AppLoading v-if="loading.page" />
</template>
<script setup>
import { onMounted, reactive, toRefs, nextTick ,ref} from "vue";
import { useRouter,useRoute } from "vue-router";
import { chapterdetail, commonQuestions } from "@/api/writtenTest";

import AppHeader from "@/components/AppHeader.vue";
import AppLoading from "@/components/AppLoading.vue";
const unitlist = []
const route = useRoute();
const router = useRouter();
const title = ref('')
const isshowTk = ref(false)
const state = reactive({
  loading: {
    page: false,
  },
  dataForm:{},
  mescrollInstance: null,
  mescrollConfig: {
    down: {
      use: true,
    },
    up: {
      auto: true,
      isBounce: false,
      noMoreSize: 4,
      htmlNodata: '<p class="upwarp-nodata">-- 无更多数据 --</p>',
      callback: (page) => {
        fetchListData(page);
      },
    },
  },
});
const hiddenTk = () =>{
  isshowTk.value=false
}
const clickArticle = (type)=>{
  if(type=== 1) {
    router.push({
      path: "/mode/reatic",
      query: { type: 'follow' },
    }); 
  } else if (type === 2) {
    router.push({
      path: "/mode/reatic",
      query: { type: 'lang' },
    });
  }
  sessionStorage.setItem('query',JSON.stringify({...route.query,toName:'writtenTest'}))
}
const cellClick = (i) => { 
  //根据返回的json跳转不同的页面
  commonQuestions({resourceFile:i.gunzipResPath_full,url:'/file/writing/res/'}).then(res=>{
    if(i.moduleName.indexOf('听力跟读')>-1){
      var dataObj = res.data
      dataObj.source_id = route.query.id
      sessionStorage.setItem('soundmark',JSON.stringify(dataObj))
      isshowTk.value=true
      return
    }
    if(i.resourceName.indexOf('重点词组归纳')>-1){
      var dataObj = res.data
      dataObj.source_id = route.query.id
      sessionStorage.setItem('resource',JSON.stringify(dataObj ))
      router.push({
        path: "/writtenTest/article",
      });
      return
    }
    var arry = res.data.resource
    if(res.data.resource.question_items){
      arry.parts=[{children:[]}]
      arry.parts[0].children = res.data.resource.question_items
    }
    if(arry.parts[0].children.length === 0) return
    arry.parts.forEach(item=>{
      if(item.children.length > 0){
        childFor(item.children)
      }
    })
    sessionStorage.setItem('resource',JSON.stringify(arry ))
    router.push({
      path: "/writtenTest/single",
      query: { sid: arry.parts[0].sid },
    });
  })

  
}
const childFor = (data)=>{
  data.forEach((child,index)=>{
    if(child.children && child.children.length > 0){
      childFor(child.children)
    }else{
      if(child.options && (child.qtype ===3 || child.qtype ===6) && (child.options.length > 0 && child.children.length === 0)){
        child.children=[{answer:{}}]
        child.options.forEach((item,i)=>{
            child.children[i] = {
              answer:{
                isAnswer:false,
                sType:'',
                sorceTotal: child.question_ref_sorce,
                sorce: -1
              }
            }
        })
      }else{
        child.answer={
          isAnswer:false,
          sType:'',
          sorceTotal: child.question_ref_sorce,
          sorce: -1
        }
      }
    }
  })
}
onMounted(async ()=>{
  if(route.query.id){
    title.value = route.query.name
    await chapterdetail({id: route.query.id,pid:route.query.productId}).then(res=>{
      state.dataForm = res.data
    })
    sessionStorage.setItem('query',JSON.stringify(route.query))
  }
}) 
const onClickLeft = () => {
  router.go(-1);
};
const { loading, mescrollConfig,questionPopupShow } = toRefs(state);
</script>
<style scoped lang="scss">
.book-details{
  background: #ffffff;
  height: 100%;
  padding-top: 44px;
  padding-bottom: 20px;
  overflow: scroll;
  .content
  {
    .cell-list{
      .custom-title{
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #333333;
        line-height: 22px;
        text-align: left;
        font-style: normal;
        margin-bottom: 10px;
      }
      .img{
        margin-right:5px;
        width: 20px;
        height: 20px;
      }
    }
   .tag-blue{
    font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 12px;
color: #0287FD;
font-style: normal;
background: url('../../assets/images/tag-blue.png') no-repeat;
background-size: 100% 24px;
  text-align: center;
  display: inline-block;
  padding: 2px 10px;
   }
   .tag-yellow{
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 12px;
      color: #FF9917;
      font-style: normal;
      background: url('../../assets/images/tag-yellow.png') no-repeat;
      background-size: 100% 24px;
        text-align: center;
        display: inline-block;
        padding: 2px 10px;
   }
  }
}
.tk-select{
  position: absolute;
  z-index: 2;
  background: rgba(0,0,0,0.75);
  top: 40px;
  bottom: 0;
  left:0;
  right:0;
  .select-box{
    padding-top: 150px;
    padding-left: calc(50% - 50px);
    .select-option{
      width: 100px;
          height: 100px;
          border-radius: 50%;
          text-align: center;
          line-height:98px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 20px;
          color: #FFFFFF;
          text-align: center;
          font-style: normal;
          margin-bottom:60px;
        &.circle-yellow{
          background: #FF9917;
        }
        &.circle-green{
          background: #0CB76C;
        }
        &.circle-blue{
          background: #0287FD;
        }
    }
  }

}
</style>
